<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue.directive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue.directive 定义指令</h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        <h3>script 脚本 记得加上类型 type="text/javascript"</h3>
        <div v-liyy="color">{{num}}</div>
        <div v-st="sts">{{num}}</div>
        <input type="text" v-model="num" />
        <p><button @click="add">加1</button></p>
    </div>
    <div>
        <button onclick="unbind()">解除vue绑定</button>
    </div>
    <style>
        .cB {
            color: blue;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        function unbind() {
            //console.log(app);
            console.log("解除vue绑定");
            app.$destroy();
        }

        //el 是元素
        //binding 是对象
        Vue.directive('liyy', {
            bind: function(el, binding) {
                console.log(el);
                console.log(binding);
                console.log(binding.name);
                console.log(binding.value);
                console.log("01 vue bind：只调用一次，指令第一次绑定到元素时调用,使用这个钩子函数可以定义一个绑定时执行一次的初始化动作");
                el.style = "color:" + binding.value;
            },
            inserted: function() {
                console.log("02 vue inserted:被绑定元素插入父节点时调用");
            },
            update: function() {
                console.log("03 vue update: 数据被更新时");
            },
            componentUpdated: function() {
                console.log("04 vue componentUpdated 组件更新完成时");
            },
            ubdind: function() {
                console.log("04 vue解除绑定时  Vue.$destory");
            }
        });
        Vue.directive('st', function(el, binding) {
            console.log(el);
            console.log(binding);
            console.log(binding.value);
            el.className = binding.value;
        })
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                num: 10,
                color: 'red',
                sts: "cB"
            },
            methods: {
                add: function() {
                    this.num++;
                }
            }
        })
    </script>
</body>

</html>